<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <DictManageIndex
        ref="dictTableRef"
        @rowClick="dictClick"
        @afterDeleteSuccess="afterDeleteSuccess"
        @afterLoadTable="afterLoadTable"
      />
    </el-col>
    <el-col :span="18">
      <DictItemManageIndex ref="dictItemTableRef" />
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
// 导入字典模块首页
import DictManageIndex from '@/views/page/system/dict/DictManageIndex.vue';
// 导入字典列表模块首页
import DictItemManageIndex from '@/views/page/system/dict/DictItemManageIndex.vue';
import { nextTick, onMounted, ref } from 'vue';
import type { Dict } from '@/types/interface/sys_interface';

// 字典模块表格对象
const dictTableRef = ref();
// 字典列表项模块表格对象
const dictItemTableRef = ref();
// 页面初始化时就要显示字典模块的默认值和对应列表项
onMounted(async () => {
  // 先执行字典组件初始化
  await dictTableRef.value!.initTable();
});
//在Dict字典组件初始化后返回的默认选中行回调
const afterLoadTable = (row: Dict) => {
  // 在字典列表项模块显示对应的值
  if (row != null) {
    dictItemTableRef.value!.setDictIdForQueryDictItem(row);
  }
};
// 点击字典表格的行，实现右侧列表项的对应变化
const dictClick = (row: any): void => {
  // console.log(row);
  dictItemTableRef.value!.setDictIdForQueryDictItem(row);
};

const afterDeleteSuccess = (rowsOfDelete: any) => {
  //删除之后，重新让字典项表格默认选中第一项
  // 获取字典模块的默认值
  const selectRows = dictTableRef.value!.getSelectionRows();
  // 在字典列表项模块显示对应的值
  if (selectRows && selectRows.length > 0) {
    console.log('删除后刷新');
    dictItemTableRef.value!.setDictIdForQueryDictItem(selectRows[0]);
  }
};
</script>

<style scoped></style>
